<template>
  <div>
    <Row>
      <i-col>
        <!--<tablePage ref="orderReportNewTab" :api="getHistoryData" :param="tabParam">-->
        <!--<template slot-scope="props">-->
        <!--<Table :columns="containerColumn" :data="props.data"></Table>-->
        <!--</template>-->
        <!--</tablePage>-->

        <div style="text-align: right;margin-bottom: 15px">
          <Button type="primary" @click="exportExcel">
            导出excel
          </Button>
        </div>
        <Table :columns="containerColumn" :data="containerData"></Table>
      </i-col>
    </Row>
  </div>
</template>
<script>
  import tablePage from '@components/table/tablePage.vue'
  // import { getHistoryData } from '@api/containerPlatform/containerManagement'
  import { getFlowData } from '@api/containerPlatform/logistics'
  // import moment from 'moment'
  import _ from 'lodash'
  import { exportUtil } from '@/vendor/exportInvoke'

  export default {
    name: 'trackingCode',
    data () {
      let tabParam = {
        containersId: ''
      }
      let containerColumn = [
        {
          title: '循环次数',
          key: 'i',
          fixed: 'left',
          width: 150
        },
        {
          title: '发站',
          key: 'sendStationName',
          width: 150
        },
        {
          title: '发出时间',
          key: 'startStationTime',
          width: 150
        },
        {
          title: '到站',
          key: 'endStationName',
          width: 150
        },
        {
          title: '到达时间',
          key: 'endStationTime',
          width: 150
        },
        {
          title: '空重',
          key: 'isEmpty',
          width: 80,
          render: (h, params) => {
            let item = params.row
            if (+item.isEmpty === 0) {
              return (<span>{'空'}</span>)
            }
            return (<span>{'重'}</span>)
          }
        },
        {
          title: '发货人',
          key: 'sender',
          width: 250
        },
        {
          title: '收货人',
          key: 'receiver',
          width: 250
        }
      ]
      let containerData = []
      let datas = { tabParam, containerColumn, containerData }
      return datas
    },
    props: {
      subOrder: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    methods: {
      exportExcel () {
        if (this.containerData.length > 20000) {
          this.$Notice.error({
            title: '导出数据过多，最多2万条数据！'
          })
          return
        }
        let result = this.fasetJson(this.containerData)
        exportUtil.export2Excel('物流监测查看历史' + Date.now(), result.columns, result.data)
      },
      fasetJson (data) {
        data.forEach((item) => {
          +item.isEmpty === 0 ? item.isEmptyCN = '空' : item.isEmptyCN = '重'
        })
        let result = {
          columns: [{ title: '循环次数', key: 'i' },
            { title: '发站', key: 'sendStationName' },
            { title: '发出时间', key: 'startStationTime' },
            { title: '到站', key: 'endStationName' },
            { title: '到达时间', key: 'endStationTime' },
            { title: '空重', key: 'isEmptyCN' },
            { title: '发货人', key: 'sender' },
            { title: '收货人', key: 'receiver' }
          ],
          data: data
        }
        return result
      }
    },
    mounted () {
      this.tabParam.containersId = this.subOrder.containersId
      // this.tabParam.containersId = '559dbee5a9e311e8a1ae0242ac110002'
      getFlowData(this.tabParam)
        .then(res => {
          if (+res.data.isSuccess === 1) {
            this.containerData = _.sortBy(res.data.data, ['i']).reverse()
          }
        })
    },
    components: { tablePage }
  }
</script>
<style>

</style>
